<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../node_modules/@vue/reactivity/dist/reactivity.global.js"></script>

<script>
  const { effect, reactive, ref, shallowRef, toRef, toRefs, computed } = VueReactivity
  const age = ref(18);

  /** case1: 单独使用*/
  const myAge = computed(()=>{ //此方法默认不会执行, 在访问属性的时候才会执行
    return age.value + 10;
  });

  // console.log(myAge.value);
  // console.log(myAge.value); //第二次不会重新执行 会用缓存
  // age.value = 100; //不会立刻重新计算
  // console.log(myAge.value); //更改后再次获取 会重新计算

  /** case2: 在effect中使用计算属性*/
  //vue2 和 vue3 computed原理是不一样的
  //vue2里面计算属性是不会具备搜集依赖的能力的
  effect(()=>{
    console.log('renderer');
    console.log(myAge.value);
  })
  /*
    renderer
    28
  */

  age.value = 200;
  /*
    renderer
    210
  */
</script>
</body>
</html>
